<?php
/**
 * @package                Joomla.Site
 * @subpackage	Templates.beez_20
 * @copyright        Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license                GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access.
defined('_JEXEC') or die;

jimport('joomla.filesystem.file');

// check modules
$showRightColumn	= ($this->countModules('right-column') or $this->countModules('right-column	') );
$showbottom			= ($this->countModules('position-9') or $this->countModules('position-10') or $this->countModules('position-11'));
$showslider			= ($this->countModules('slider'));
$showblock			= ($this->countModules('block1') or $this->countModules('block2') or $this->countModules('block3') or $this->countModules('block4') or $this->countModules('block5') or $this->countModules('block6'));

JHtml::_('behavior.framework', true);

// get params
$color				= $this->params->get('templatecolor');
$logo				= $this->params->get('logo');
$navposition		= $this->params->get('navposition');
$app				= JFactory::getApplication();
$doc				= JFactory::getDocument();
$templateparams		= $app->getTemplate(true)->params;
$templatepath       = $this->baseurl.'/templates/'.$this->template;
//$doc->addStyleSheet($this->baseurl.'/templates/system/css/system.css');

$doc->setGenerator('Kyle\'s Blog - Tổng hợp các thủ thuật hay trong lập trình thiết kế web');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="<?php echo $this->language; ?>" xml:lang="<?php echo $this->language; ?>" xmlns="http://www.w3.org/1999/xhtml" slick-uniqueid="3">
<head>
  <meta property="og:image" content="<?php echo $templatepath; ?>/src/images/logo.png"/>
  <meta property="og:title" content="Kyle's Blog - Share To Be Shared"/>
  <meta property="og:site_name" content="Kyle's Blog"/>
  <meta property="og:description" content="Kyle's Blog - Tổng hợp các thủ thuật hay trong lập trình thiết kế web" />
  <meta property="og:type" content="blog"/>
  <jdoc:include type="head" />
  <meta property="og:image" content="<?php echo $templatepath; ?>/src/images/logo.png"/>
  <meta property="og:title" content="Kyle's Blog - Share To Be Shared"/>
  <meta property="og:site_name" content="Kyle's Blog"/>
  <meta property="og:description" content="Kyle's Blog - Tổng hợp các thủ thuật hay trong lập trình thiết kế web" />
  <meta property="og:type" content="blog"/>
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/modal.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/k2.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/superfish.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/gantry.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/style.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/grid-12.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/joomla.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/sizes.php" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/skeleton12.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/template.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/tooltips.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/prettyPhoto.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/framework-reset.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/responsive.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/sfmenu.css" rel="stylesheet">
  <link type="text/css" href="<?php echo $templatepath; ?>/src/css/flexslider.css" rel="stylesheet">
	<style type="text/css">
body {background:;}#rt-top {background:;}#rt-top .rt-container {background:none;}#rt-header {background:;}#rt-header .rt-container {background:none;}#rt-menu {background:;}#rt-menu .rt-container {background:none;}#rt-showcase {background:;}#rt-showcase .rt-container {background:none;}#rt-feature {background:none;}#rt-feature .rt-container {background:none;}#rt-utility {background:none;}#rt-utility .rt-container {background:none;}#rt-maintop {background:#272624;}#rt-maintop .rt-container {background:none;}#rt-main {background:;}#rt-main .rt-container {background:none;}#rt-mainbottom {background:;}#rt-mainbottom .rt-container {background:none;}#rt-bottom {background:;}#rt-bottom .rt-container {background:none;}#rt-footer {background:;}#rt-footer .rt-container {background:none;}#footer {background:;}#footer .footer-container {background:;}body a {color:#e54838;}body a:hover {color:#e54838;}a.moduleItemReadMore, a.k2ReadMore, a.moduleCustomLink,.component-content div.toggle-editor a {color:#6a6663;}a.moduleItemReadMore:after, a.k2ReadMore:after, a.moduleCustomLink:after,.component-content div.toggle-editor a:after {background:#191918;}a.moduleItemReadMore:hover, a.k2ReadMore:hover, a.moduleCustomLink:hover,.component-content div.toggle-editor a:hover {color:#ffffff;}a.moduleItemReadMore:before, a.k2ReadMore:before, a.moduleCustomLink:before,.component-content div.toggle-editor a:before,a.moduleItemReadMore .before, a.k2ReadMore .before, a.moduleCustomLink .before,.component-content div.toggle-editor a .before {background:#e54838;}div.itemCommentsForm form input#submitCommentButton, input[type="submit"], button.button {color:#6a6663; background:#191918;}div.itemCommentsForm form input#submitCommentButton:hover, input[type="submit"]:hover, button.button:hover {color:#ffffff;background:#e54838;}.sf-menu  li  .sf-holder  a,.sf-menu  li  .sf-holder  .separator{color:#6a6663;}.sf-menu  li  .sf-holder:before,.sf-menu  li  .sf-holder .before{background:#e54838; }.sf-menu  li  .sf-holder  a:hover, .sf-menu  li  .sf-holder  a:active, .sf-menu  li.sfHover  .sf-holder  a, .sf-menu  li.sfHover  .sf-holder  .separator, .sf-menu  li:hover  .sf-holder  .separator, .sf-menu  li.current  .sf-holder  a,
				.sf-menu  li.current  .sf-holder  .separator, .sf-menu  li.active  .sf-holder  a, .sf-menu  li.active  .sf-holder  .separator {color:#ffffff;}.sf-menu ul{background:#272624;}.sf-menu ul  li  .sf-holder:before,.sf-menu ul  li  .sf-holder .before {background:#e54838;} .sf-menu ul  li  .sf-holder  a, .sf-menu ul  li  .sf-holder  .separator {color:#6a6663;} .sf-menu ul  li  .sf-holder  a:hover, .sf-menu ul  li:hover  .sf-holder  a, .sf-menu ul  li:hover  .sf-holder  .separator, .sf-menu ul  li  .sf-holder  a:active, .sf-menu ul  li.current  .sf-holder  a, 
			.sf-menu ul  li.current  .sf-holder  .separator, .sf-menu ul  li.sfHover  .sf-holder  a, .sf-menu ul  li.sfHover  .sf-holder  .separator, .sf-menu ul  li.active  .sf-holder  .separator, .sf-menu ul  li.active  .sf-holder  a 
			{color:#ffffff;}{background:;}{background:;}{background:;}body {font-family:Arial, "Times New Roman", sans-serif; font-size:12px; line-height:16px; color:#928e8b; }
	</style>
	<style>	
a {cursor:pointer;}
.bg_alert{ width:275px; height:115px; background:url("<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/img/bg_alert.png") no-repeat top left; margin:0px auto; padding:10px 0px 0px 78px; color:#000;}
.m35l{ margin-left:35px;}
	</style>
  <script type="text/javascript" async="" src="<?php echo $this->baseurl; ?>/media/system/js/modal.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/ga.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/jquery.min.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/jquery-ui-1.8.16.custom.min.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/k2.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/rokbox.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/superfish.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/jquery.responsivemenu.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/jquery.hoverIntent.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/gantry-totop.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/jquery.ScrollTo.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/tooltips.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/jquery.tipsy.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/jquery.PrettyPhoto.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/jquery.mobilemenu.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/init.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/jquery.flexSlider.js"></script>
  <script type="text/javascript" src="<?php echo $templatepath; ?>/src/js/jquery.validate.js"></script>
  <script type="text/javascript">	$.noConflict();	</script>
  <script type="text/javascript">

		window.addEvent('domready', function() {

			SqueezeBox.initialize({});
			SqueezeBox.assign($$('a.modal'), {
				parse: 'rel'
			});
		});
var K2SitePath = '/joomla_40237/';
var rokboxPath = '/joomla_40237/plugins/system/rokbox/';
		if (typeof(RokBox) !== 'undefined') {
			window.addEvent('domready', function() {
				var rokbox = new RokBox({
					'className': 'rokbox',
					'theme': 'clean',
					'transition': Fx.Transitions.Quad.easeOut,
					'duration': 200,
					'chase': 40,
					'frame-border': 20,
					'content-padding': 0,
					'arrows-height': 35,
					'effect': 'quicksilver',
					'captions': 0,
					'captionsDelay': 800,
					'scrolling': 0,
					'keyEvents': 1,
					'overlay': {
						'background': '#000000',
						'opacity': 0.85,
						'duration': 200,
						'transition': Fx.Transitions.Quad.easeInOut
					},
					'defaultSize': {
						'width': 640,
						'height': 460
					},
					'autoplay': 'true',
					'controller': 'false',
					'bgcolor': '#f3f3f3',
					'youtubeAutoplay': 0,
					'youtubeHighQuality': 0,
					'vimeoColor': '00adef',
					'vimeoPortrait': 0,
					'vimeoTitle': 0,
					'vimeoFullScreen': 1,
					'vimeoByline': 0
				});
			});
		};
window.addEvent('domready', function() {
});
window.addEvent('load', function() {
});

</script>
  <script type="text/javascript">
	jQuery(document).ready(function(jQuery) {
		close_popup=function(){		
				var fel=jQuery('#f_focus').html();
				jQuery('#backoverlay').hide();
				jQuery('#show_popup').hide();
				jQuery('#' + fel ).focus();		
		 };
	 });
	 jQuery(function() {
		if( jQuery('#system-message dd ul li').length > 0) {
					jQuery('#alert').html(jQuery('#system-message dd ul li').html());
					jQuery('#backoverlay').show();
					jQuery('#show_popup').show();
				}
	});
  </script>		
  <script type="text/javascript">
	// initialise plugins
	jQuery(function(){
		jQuery('ul.sf-menu').superfish({
			hoverClass:    'sfHover',         
		    pathClass:     'overideThisToUse',
		    pathLevels:    1,    
		    delay:         500, 
		    animation:     {opacity:'show',height:'show'}, 
		    speed:         'normal',   
		    autoArrows:    false, 
		    dropShadows:   true, 
		    disableHI:     false, 
		    onInit:        function(){},
		    onBeforeShow:  function(){},
		    onShow:        function(){},
		    onHide:        function(){}
		});
	});
</script>
<script type="text/javascript">
(function($){ 
   $(window).load(function(){
		$('#flexslider').flexslider({
			animation: 'fade',              		 //String: Select your animation type, "fade" or "slide"
			slideDirection: 'horizontal',    		 //String: Select the sliding direction, "horizontal" or "vertical"
			slideshow: true,               			 //Boolean: Animate slider automatically
			slideshowSpeed: 6000,           	 //Integer: Set the speed of the slideshow cycling, in milliseconds
			animationDuration: 800,         //Integer: Set the speed of animations, in milliseconds
			directionNav: true,             		 //Boolean: Create navigation for previous/next navigation? (true/false)
			controlNav: false,               		 //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
			keyboardNav: false,              		 //Boolean: Allow slider navigating via keyboard left/right keys
			mousewheel: false,              		 //Boolean: Allow slider navigating via mousewheel
			prevText: "Prev",           				 //String: Set the text for the "previous" directionNav item
			nextText: "Next",              			 //String: Set the text for the "next" directionNav item
			pausePlay: false,               			 //Boolean: Create pause/play dynamic element
			pauseText: 'Pause',             		 	 //String: Set the text for the "pause" pausePlay item
			playText: 'Play',              			 //String: Set the text for the "play" pausePlay item
			randomize: false,               			 //Boolean: Randomize slide order
			slideToStart: 0,                	 //Integer: The slide that the slider should start on. Array notation (0 = first slide)
			animationLoop: true,            	 //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
			pauseOnAction: true,            	 //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
			pauseOnHover: true,            		 //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
			controlsContainer: '.flex-nav-container',       //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
			manualControls: '',             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
			start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
			before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
			after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
			end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)		});
	});
});
})(jQuery);     

</script>
	<!--[if (gt IE 9)|!(IE)]><!-->
	<script type="text/javascript">
		jQuery(function(){
			jQuery('.sf-menu').mobileMenu({});
		})
	</script>
	<!--<![endif]-->
</head>
	
<body id="all" class="cssstyle-style1 respmenu-type-sfmenu col12">
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
	<div id="dialog" style="display:none; position: fixed; top: 10%; left: 35%; z-index:10002;"></div>
	<div class="bg_alert" id="show_popup" style="font-size:13px; display:none; position: fixed; top: 35%; left: 50%; z-index:10003; margin-left:-140px;">
		<span id="f_focus" style="display:none;"></span>
		<div style="margin:0; padding-top:0px; min-height:75px;width:260px;" id="alert"></div>
		<div style="padding-left: 40px;"><a href="javascript:void(0);" onclick="close_popup();"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/img/bt_luk.png" alt="" /></a></div>
	</div>
	<div style="display: none;position: fixed; top: 0;left: 0;width: 100%;height: 100%;background-color: #000000;z-index:10002;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);" id="backoverlay"></div>	
	
	<div id="body-wrapper">
	<div id="rt-iewarn">
		<div class="rt-container">
			<div class="clear"></div>
		</div>
	</div>
	
<div class=" homepage itemlist com_k2 category" id="wrapper">
	<div id="rt-header">
		<div class="rt-container">
			<div class="rt-grid-12 rt-alpha ">
				<div class="rt-block">
					<a id="rt-logo" href="index.php"></a>
				</div>
			</div>
			<div class="clear"></div>
			
					<jdoc:include type="modules" name="language" style="none"/>
			
			<div class="clear"></div>
			<div class="rt-grid-12 rt-omega">
				<div class="rt-block">
					<div class="likebuttons">
						<script src="https://apis.google.com/js/plusone.js"></script>
						<div style="float: left; margin-right: 7px; height: 33px;">
							<g:plus action="share" annotation="bubble"></g:plus>
						</div>
						<div class="fb-like" data-href="http://www.kyle.vn/" data-send="true" data-width="450" data-show-faces="true"></div>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
<div id="rt-menu">
	<div class="rt-container">
		<div id="mobileMenu"></div>
			<jdoc:include type="modules" name="navigate" style="none"/>
		<div class="clear"></div>
	</div>
</div>

<div id="rt-showcase">
		<div class="rt-container homepage">
			<div style="display:none">
					
			</div>
			<div class="rt-grid-12 rt-alpha rt-omega">
				<div class="rt-block">
			
					<div class="k2ItemsBlock" id="k2ModuleBox115">
						<div class="flex-nav-container">
						<?php if($showslider): ?>
							<div class="flexslider" id="flexslider">
									
								<jdoc:include type="modules" name="slider" style="none"/>
							</div>
									
						<ul class="flex-direction-nav"><li><a href="#" class="prev"><span></span><span></span><span></span></a></li><li><a href="#" class="next"><span></span><span></span><span></span></a></li></ul>
						<?php endif; ?>	
						</div>
					</div>
			
				</div>
			</div>
			<div class="clear"></div>
		</div>
</div>

	<div id="rt-feature">
		<div class="rt-container" style="display:none;">
			<div class="rt-grid-12 rt-alpha rt-omega">
				<div class="clear"></div>
				<jdoc:include type="message" />
				<div class="clear"></div>
			</div>
		</div>
	</div>
	<?php if($showblock): ?>
	<div id="rt-maintop">
	
			<div class="rt-container">
				<div class="rt-grid-4 rt-alpha">
					<div class="top_block">
						<div class="rt-block">
							<jdoc:include type="modules" name="block1" style="none"/>
						</div>
					</div>	
				</div>
				<div class="rt-grid-4">
					<div class="top_block">
						<div class="rt-block">
							<jdoc:include type="modules" name="block2" style="none"/>
						</div>
					</div>
				</div>
				<div class="rt-grid-4 rt-omega">
					<div class="top_block">
						<div class="rt-block">
							<jdoc:include type="modules" name="block3" style="none"/>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="rt-container">
				<div class="rt-grid-4 rt-alpha">
					<div class="top_block">
						<div class="rt-block">
							<jdoc:include type="modules" name="block4" style="none"/>
						</div>
					</div>	
				</div>
				<div class="rt-grid-4">
					<div class="top_block">
						<div class="rt-block">
							<jdoc:include type="modules" name="block5" style="none"/>
						</div>
					</div>
				</div>
				<div class="rt-grid-4 rt-omega">
					<div class="top_block">
						<div class="rt-block">
							<jdoc:include type="modules" name="block6" style="none"/>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
	</div>
	<?php endif; ?>	
	<div class="mb8-sa4" id="rt-main">
		<div class="rt-container">
			<div class="rt-grid-<?php echo $showRightColumn?'8':'12'; ?> ">
				<div class="rt-block">
					<div id="rt-mainbody">
						<div class="component-content">
							
							<jdoc:include type="component" />
						</div>
					</div>
				</div>
				<jdoc:include type="modules" name="right-column1" style="none"/>
			</div>
		<?php if($showRightColumn): ?>
			<div class="rt-grid-4 ">
							
				<div id="rt-sidebar-a">
					<div class="latest_news lastItem">
						<div class="rt-block">
							<jdoc:include type="modules" name="right-column" style="none"/>
						</div>
					</div>
				</div>
			</div>		
			
		<?php endif; ?>	
		<div class="clear"></div>
		</div>
	</div>
	<div class="push"></div>
	</div>

	<div id="footer">
		<div class="footer-container">
			<div id="rt-footer">
				<div class="rt-container">
					<div class="rt-grid-3 rt-alpha">
						<div class="articles">
							<div class="rt-block">
								<jdoc:include type="modules" name="footer-block1" style="none"/>
							</div>
						</div>
					</div>
					<div class="rt-grid-3">
						<div class="rt-block">
							<jdoc:include type="modules" name="footer-block2" style="none"/>
						</div>
					</div>
					<div class="rt-grid-3">
						<div class="rt-block">
							<jdoc:include type="modules" name="footer-block3" style="none"/>
						</div>
					</div>
					
					<div class="rt-grid-3 rt-omega">
						<div class="clear"></div>
						<div class="rt-block">
							<jdoc:include type="modules" name="cloudtags" style="none"/>
							<div class="clear"></div>
							<br />
							<jdoc:include type="modules" name="copyright" style="none"/>
						</div>
					</div>
					<!-- {%FOOTER_LINK} -->
					<div class="clear"></div>
				</div>
			</div>
			<div id="rt-copyright">
				<div class="rt-container">
					<div class="rt-grid-12 rt-alpha rt-omega">
					<div class="clear"></div>
					<div class="rt-block totop" style="display: none;">
						<a id="gantry-totop" href="#" style="outline: medium none;">Scroll to Top</a>
					</div>

					</div>
				<div class="clear"></div>
				</div>
			</div>
		</div>
			
	</div>
</div>

<div id="sbox-overlay" aria-hidden="true" style="z-index: 65555; opacity: 0;" tabindex="-1"></div><div id="sbox-window" role="dialog" aria-hidden="true" style="z-index: 65557;" class="shadow"><div id="sbox-content" style="opacity: 0;"></div><a id="sbox-btn-close" href="#" role="button" aria-controls="sbox-window"></a></div><div id="rokbox-overlay" class="rokbox-overlay" style="opacity: 0; display: none; position: absolute; top: 0px; left: 0px; cursor: pointer; background-color: rgb(0, 0, 0); z-index: 65550;"></div><div id="rokbox-wrapper" class="rokbox-clean" style="position: absolute; z-index: 65555; opacity: 0; display: none;"><div id="rokbox-top" class="rokbox-left"><div class="rokbox-right"><div class="rokbox-center"></div></div></div><div id="rokbox-middle" class="rokbox-left"><div class="rokbox-right"><div class="rokbox-center"><a id="rokbox-close" href="#"><span>[x] close</span></a></div></div></div><div id="rokbox-bottom" class="rokbox-left"><div class="rokbox-right"><div class="rokbox-center"></div></div></div><div class="clr"></div></div><div id="s-m-t-tooltip" style="display: none;"></div>
<jdoc:include type="modules" name="debug" />
</body>
</html>
